Home/ Questions/Q 8297041
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T15:15:15+00:00

I’m trying to get into web development, specifically CSS right now, and I wanted

  • 0

I’m trying to get into web development, specifically CSS right now, and I wanted to do something practical: a simple menu bar. However, I have issues in formatting the anchors of the submenus properly as they take two rows instead of one.

Here’s the HTML code:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="test.css" />
    </head>
    <body>
        <ul id="menu">
            <li><a href="#">Menu 1</a>
                <ul>
                    <li><a href="#">Submenu 1</a></li>
                    <li><a href="#">Submenu 2</a></li>  
                    <li><a href="#">Submenu 3</a></li>
                    <li><a href="#">Submenu 4</a></li>
                </ul>
            </li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
            <li><a href="#">Menu 5</a></li>
        </ul>
    </body>
</html>

And the CSS code:

#menu{ 
    list-style: none;
    padding: 0px;
    margin: 0px;
    }
#menu li{
    float:left;
    padding: 0px 8px 0px 8px;
    position: relative;
}
#menu li ul{
    position: absolute;
    list-style: none;
    right: 0;
    display: none;
}
#menu li li{
    float: none;
}
#menu li:hover ul{
    display: block;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a few options…

    changing your CSS to the following give the entire submenu underneath the other main menu items

    #menu{ 
    list-style: none;
    padding: 0px;
    margin: 0px;
    }
#menu li{
    float:left;
    padding: 0px 8px 0px 8px;
}
#menu li ul{
    list-style: none;
    right: 0;
    display: none;
    width: 100%;
    position: absolute;
}
#menu li li{
    float: none;
    width: 100%;
    display: block;
}
#menu li:hover ul{
    display: block;
}​

    This option will slide the top menu items over, which may not be ideal, but hey it’s an option…

    #menu{ 
    list-style: none;
    padding: 0px;
    margin: 0px;
    }
#menu li{
    float:left;
    padding: 0px 8px 0px 8px;
}
#menu li ul{
    list-style: none;
    right: 0;
    display: none;
    position: relative;
    width: 100%;
}
#menu li li{
    float: none;
    width: 100%;
    display: block;
}
#menu li:hover ul{
    display: block;
}​
    • 0