CODEWITHSUNDEEP
htmlcss
user1839601
user1839601

Reputation: 119

Drop down menu won't style

HTML:

<ul id="myMenu">
        <li><a class = "link" href='#page1' Tooltip = "Home Page">Home</a>    </li>
            <li><a href='#page2'>Teams</a></li>
            <li><a href='#page3'>Games</a>
                <ul>
                <li><a href='#page3'>CLG</a></li>
                <li><a href='#page3'>TSM</a></li>
                <li><a href='#page3'>C9</a></li>
                <li><a href='#page3'>SKT T1</a></li>
                </ul>
            </li>
            <li><a href='#page4'>Venues</a></li>
            <li><a href='#page4'>Battle</a></li>
        </ul>

CSS:

#myMenu {
    background-color: red;
    list-style-type:none;
    height:30px;
    width: 100%;
}
#myMenu li { 
    float:left; 
    text-align: center;
    width: 20%; 
}
#myMenu li a {
    padding:9px 20px;
    display:block;
    color: #fff;
    text-decoration:none;
}

#myMenu li:hover { 
    position:relative; 
    background-color: white
}

#myMenu li:hover a{ 
    color: red;
}

/* Submenu */
#myMenu ul {
    position: absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
    color: white;

}

#myMenu li:hover ul {
    left: 0;
    top:30px;
    color: white;
}

#myMenu li:hover ul li a {
    padding:5px;
    display:block;
    text-indent:15px;
    background-color: black;
    color: white;

}
#myMenu li:hover ul li a:hover { 
color: #fff;

    }

http://jsfiddle.net/hY2VF/1/

When you highlight 'Games' I want my secondary unordered list to appear, the same width as the list element above it, then all elements within that list just to appear under one another, but they are staying on the same line no matter what I change.

I'm not that great at using position: absolute, because if I could use float: left, I could just make them width 192px, then float all the elements left and that would force them onto a new 'line'.

Hm, any assistance at all would be great.

Upvotes: 0

Views: 97

Answers (5)

Carl0s1z
Carl0s1z

Reputation: 4723

You should add this to your css:
A float:none; (so the effects of the previous float will be reset).
Use width:100%; to set the width as the same width as the <li> add this to #myMenu li:hover ul li{}
And than add left: -40px; (You can tweak this) on the #myMenu li:hover ul{} to get it directly under it.

#myMenu li:hover ul {
    left: -40px;            /* add this line */
    top:30px;
    color: white;
    width:100%;             /* add this line */
}

And add this new part (with the float:none;):

#myMenu li:hover ul li{
    float:none;       
    width:100%;         
}

DEMO Your fiddle updated

Upvotes: 2

Nitish Thakrar
Nitish Thakrar

Reputation: 515

Try this code. just add one class in Main ul

Html

<ul id="myMenu">
    <li><a class = "link" href='#page1' Tooltip = "Home Page">Home</a>    </li>
    <li><a href='#page2'>Teams</a></li>
    <li><a href='#page3'>Games</a>
        <ul>
            <li><a href='#page3'>CLG</a></li>
            <li><a href='#page3'>TSM</a></li>
            <li><a href='#page3'>C9</a></li>
            <li><a href='#page3'>SKT T1</a></li>
        </ul>
    </li>
    <li><a href='#page4'>Venues</a></li>
    <li><a href='#page4'>Battle</a></li>
</ul>

Css

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.dropdown {
    position: relative;
    z-index: 597;
    float: left;
}

ul.dropdown li {
    float: left;
    line-height: 1.3em;
    vertical-align: middle;
    zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
    position: relative;
    z-index: 599;
    cursor: default;
}

ul.dropdown ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    width: 100%;
}

ul.dropdown ul li {float: none;}

ul.dropdown ul ul {
    top: 1px;
    left: 99%;
}

ul.dropdown li:hover > ul {
    visibility: visible;
}

.dropdown li a {
    margin: 0 10px;
    text-decoration: none;
    float: left;
    width: 100%;
}
.dropdown li a:hover ul li {
    background: #000;
    opacity: 0.9;
}

Upvotes: 0

Rohil_PHPBeginner
Rohil_PHPBeginner

Reputation: 6080

I have made new CSS.Just Check it out.I hope it'll work.

[DEMO](http://jsfiddle.net/z6QrC/)

Upvotes: 0

Bipin Kumar Pal
Bipin Kumar Pal

Reputation: 1017

Use this I think useful for you.

#myMenu li:hover ul li a {
display:inline-block;

}

Upvotes: 0

Mike
Mike

Reputation: 1175

Here's an updated version of your CSS: http://jsfiddle.net/hY2VF/4/

This is the most important change:

#myMenu li ul li {
    clear:both;
    width:auto;
    display:block;
}

width:auto releases the width restriction set in #myMenu li {.

Upvotes: 0

Related Questions