CODEWITHSUNDEEP
htmlcssweb
Cristi
Cristi

Reputation: 45

Formatting issue in CSS

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;
}

Upvotes: 1

Views: 67

Answers (3)

Tiffany Israel
Tiffany Israel

Reputation: 470

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;
}​

Upvotes: 1

GG.
GG.

Reputation: 21854

Just set the width of #menu li.

#menu li{
    float:left;
    padding: 0px 8px 0px 8px;
    position: relative;
    width: 80px;
}

Try a demo.

Upvotes: 0

Aaron Walker
Aaron Walker

Reputation: 185

Increase the width of li so that the text can fit.

Upvotes: 0

Related Questions