Creating a dropdown navigation bar with HTML and CSS

I am currently in the process of creating a dropdown menu for my website. As someone who is new to web design and still learning the ropes, I am pleased with the progress I have made so far.

Here is the HTML code I am using:

<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
  <li>Web Design</li>
  <li>Web Development</li>
  <li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>

And here is the corresponding CSS code:

ul {

text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer; 
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li { 
background: #555; 
display: block; 
color: #fff;  
}
ul li ul li:hover 
 {
 background: #666;
 }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
 }

I am looking to add a new list item to the existing <li>Web Design</li>. If anyone could provide guidance on how to achieve this and create a submenu that appears on the right side when hovering over "Web Design," I would greatly appreciate it. Thank you very much in advance.

htmlcss

Answer №1

Hey there! Feel free to utilize this code snippet:

body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
line-height:20px;
}
a {
    text-decoration:none;
    color:#03C;
}
a:hover {
    color:#CCC;
}
#main-menu {
    position:relative;
line-height:16px;
}
#main-menu a {
    display:block;
    width:150px;
    padding:8px;
    border:#666 solid 1px;
    background-color:#030; 
    color:#FFF;       
}
#main-menu a:hover {
    background-color:#060;        
}
#main-menu ul {
    list-style-type:none;
    padding-top:0px;    
}
#main-menu li {
    float:left;
    position:relative;
    text-align:center;
}
#main-menu li ul a{
    text-align:center;
    border:0px;
    border-bottom:#666 1px solid;
}
#main-menu li:hover ul ul{
display:none;
}
#main-menu li li:hover ul{
display:block;
position:absolute;
top:10px;
left:125px;
z-index:1000;
}
#main-menu ul.sub-menu {
    display:none;
    position:absolute;
    top:30px;
    margin-left:0px;
    padding:0px;
    z-index:999;
}
#main-menu ul.sub-menu li {
    text-align:center;
}
#main-menu li:hover ul.sub-menu {
    display: block;
    border: 1px solid #666;
}
.clear{
    clear:both;
}
<div id="main-menu">
<ul>
<li><a href="#">Home</a>
   <ul class="sub-menu">
        <li><a href="#">sub1</a></li>
        <li><a href="#">sub1</a></li>
        <li><a href="#"> << sub1 </a> 
            <ul>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
           </ul>
        </li>
        <li><a href="#">sub1</a></li>        
   </ul>
</li>
<li><a href="#">About</a>
    <ul class="sub-menu">
        <li><a href="#"> << sub1</a> 
            <ul>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
           </ul>
        </li>
        <li><a href="#">sub1</a></li>
        <li><a href="#">sub1</a></li>
        <li><a href="#">sub1</a></li>        
    </ul>
</li>
<li><a href="#">Portfolio</a>
    <ul class="sub-menu">
        <li><a href="#">sub1</a></li>
        <li><a href="#"> << sub1</a>
            <ul>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
           </ul> 
        </li>          
        <li><a href="#">sub1</a></li>
        <li><a href="#"> << sub1</a>
            <ul>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
                <li><a href="#">sub2</a></li>
           </ul> 
        </li>        
    </ul>
</li>
</ul>
<div class="clear"></div>
</div>

Answer №2

<style>
#ul1 {

text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
#ul1 li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer; 
}
#ul1 li:hover {
background: #555;
color: #fff;
}
#ul2 {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
#ul3,#ul4,#ul5,#ul6 {
padding: 0;
position: absolute;
top: 0px;
left: 155;
width: 150px;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}


#ul2 li,#ul3 li,#ul4 li{ 
background: #555; 
display: block; 
color: #fff;  
}
#ul2 li:hover , #ul3 li:hover , #ul4 li:hover 
 {
 background: #666;
 }

#ul1 li:hover #ul2,#ul2 li:hover #ul3,#ul3 li:hover #ul4{
display: block;
opacity: 1;
visibility: visible;
 }
</style>

<ul id="ul1"><li>Home</li>
<li>About</li>
<li>Portfolio
   <ul id="ul2"><li>Web Design</li><li>Web Development</li><li>Illustrations
       <ul id="ul3"><li>Sub1</li><li>Sub2</li><li>Sub3
           <ul id="ul4"><li>Sub1</li><li>Sub5</li><li>Sub6</li>
           </ul></li></li>
       </ul></li>
   </ul></li>
<li>Blog</li>
<li>Contact</li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Jquery click menu is functional, but appears completely translucent in Safari and the majority of mobile browsers

I have implemented a link that, when clicked, should reveal a menu on the website. This feature is specifically optimized for smaller browser windows with a breakpoint set at 965px. However, I am encountering some varied behaviors across different browsers ...

javascriptjqueryhtmlcsscross-browser

Applying media queries to a <div> instead of the entire viewport can be a useful technique, especially when used in conjunction with

I am looking to create a dynamic layout where different content such as tables and masks can be displayed in multiple areas or columns on a website. Typically, the left column will contain a list, the middle column details of an entry, and the right column ...

javascriptcssbootstrap-4media-queriesscss-mixins

When the container size increases, elements may overflow and be pushed outside the boundaries

After adjusting the CSS in ".container" from "width:800px" to "width:1900px", all the elements become misaligned. The orange box is no longer centered and instead leans towards the left side. I'm curious if anyone knows why this is happening? A friend ...

htmlcss

What could be the reason for my AngularJS animation failing to work as expected?

I've been facing an issue with the animations in my Angular app. Whenever an admin deletes a user, the changes are made asynchronously in the database and the corresponding user index is removed from the model $scope.users. Below is the relevant snipp ...

javascriptcssangularjs

Numerous attributes for displaying ngOption values

I have an item that resembles the following: $scope.team = [ { name: "John", number: 1 }, { name: "Emma", number: 2 } ]; Currently, in my HTML code, I am using ngOption to populate a dropdown menu with values from the object. < ...

javascripthtmlangularjsng-options

Using Angular to implement a method that displays an HTML panel when a button is clicked

https://i.sstatic.net/A6J82.png Hello everyone! As a seasoned Angular developer, I am looking to add a feature to my button that will display two panels – one for campaign and the other for script – based on a radio button click. However, I'm not ...

htmlangular

What is the optimal method for visualizing a closing tag?

Struggling with a chunk of code full of bracket issues? Looking for a website where you can paste your HTML code and easily spot missing closing tags? ...

c#htmlasp.net-mvc-3

Animating the Ember Collection while paginating

Our team is currently developing an ember-pagination library to assist developers with pagination of items within an array collection. The library is already able to display content, enable pagination, and incorporate a typeahead feature for search funct ...

jquerycssanimationember.js

unable to select a highlighted drop-down menu with focus

Upon loading the page, I am attempting to have the dropdown with the select tag highlighted. Despite trying to apply focus to all of the multiple classes within the select tag, it has not been successful. Can someone take a look at this for me? div.cs-s ...

cssselectbootstrap-4focusautofocus

Scraping a website where the page source doesn't match what is displayed on the browser

Imagine I'm interested in extracting marathon running time data from a specific website: Upon inspecting the webpage using Google Chrome, I noticed that the desired data is not directly visible in the page source. Although I have successfully scraped ...

pythonhtmlselenium-webdriverweb-scrapingbeautifulsoup

What is the best way to customize the color of a bootstrap badge?

I'm trying to customize a bootstrap badge with a different color. As I am relatively new to frontend development, I may be asking a basic question, but I created the following CSS: .badge .badge-danger{ color:#FFFFFF; } I then added the new CSS af ...

cssbootstrap-4

What could be the reason that the style tag present in this SVG is not impacting any of the elements?

My SVG file consists of a single element with a fill set to red: <svg width="100" height="60" viewBox="0 0 100 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill="red" d=&qu ...

csssvg

Error encountered: Unexpected token when defining inline style in React

When attempting to prevent scrolling on the page by using style='overflow-y: auto;': render() { return ( <div style={{overflow-y: auto}}> <div>{this.props.title}</div> <div>{this.props.children}& ...

javascriptcssreactjsreact-bootstrap

Sending data from a PHP URL to JavaScript and then to another PHP file

After referencing the code from , I am modifying it to send the recorded audio file to a server by including a sessionId in the URL. The PHP page for this purpose is located at . My PHP versions are PHP 5.4 and PHP 5.5.22. For passing variables and data be ...

javascriptphphtmlpostxmlhttprequest

Optimizing jQuery Dialog for Different Window Sizes

I am currently developing a responsive website and facing a challenge. I need to implement a popup for window sizes smaller than 480px, but on desktop screens, the content should be visible without being inside the popup. I want to avoid duplicating the co ...

javascriptjquerycssresponsive-design

CSS rule: The behavior of my specified property is not being implemented

I have inserted an image directly into my HTML code, which serves as a small profile picture. I am attempting to position this image in the top right corner of my website, but no matter what CSS property I apply, the image refuses to budge. body { fon ...

css

Error: The function $(...).froalaEditor is not recognized | This issue is occurring within the $(document).ready(function(){}) block in J

When attempting to set HTML content of the Froala editor within a JSP using $(document).ready(), this error occurs. TypeError: $(...).froalaEditor is not a function | $(document).ready(function(){}) in JSP I read on a GitHub issue that placing jQuery sc ...

javascripthtmljqueryjspfroala

A guide on personalizing HTML for Django forms

I have implemented an HTML template on my website and need to capture information for my Django backend. Specifically, I am trying to extract the email address from this section of code: <input type="text" placeholder="Email" value="" style="height: 30 ...

javascriptjqueryhtmlcssdjango

Creating a simulated web server for AJAX requests within the IntelliJ environment

IntelliJ allows for the deployment of HTML/JS code on localhost:63342 in real-time, providing immediate feedback on how the frontend functions. Presently, a web application is running. http://localhost:8080/frontend http://localhost:8080/backend The fro ...

htmlweb-servicesdebuggingintellij-ideamocking

Reacting to the dynamic removal of spaces

Is there a way to dynamically remove the space between removed chips and older chips in Material-UI when deleting one of them? <div className="row contactsContainer"> {contacts.map((contac ...

cssreactjstypescriptdynamicmaterial-ui