drop down menu css problem

  • Resolved bjssoftware

    (@bjssoftware)


    10 years, 9 months ago

    Hello, I have been stuck on this for days now and not getting anywhere.

    I am trying to get the submenu items in a nice vertical list
    e.g

    item1
    item2
    item3

    currently the submenu items are on top of each other horizontally.

    eg.

    item1 2 3

    here is the call for the menu:

    <div id="navmenu">
<div class="menucontainer">

<?php wp_nav_menu( array( 'buddy' => 'top-nav' , 'container_class' => 'navmenu' ) ); ?>
</div>
</div>

    here is my css at the moment.

    .navmenu {
background-color: #fff;
height: 42px;
font-size: 16px;
}

.navmenu ul,
div.menu ul {
width:100%;
max-width:1000px;
list-style-type:none;
display:block;
margin:0 auto;
padding: 0;
}

.navmenu li,
div.menu li {
float: left;
text-align: center;
width: 20%;
position: relative;
}

.navmenu ul ul {
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: auto;
z-index: 99999;
}

.navmenu a {
color: #ed1d78;
display: block;
line-height: 41px;
padding: 0 10px;
text-decoration: none;
font-weight: bold;
}

.navmenu ul li:hover > ul {
display: block;
}

.navmenu li:hover > a,
.navmenu ul ul :hover > a {
background: #ed1d78;
color: #D1CFCF;
}

.navmenu ul ul a {
background: #fff;
line-height: 1em;
padding: 10px;
width: 200px;
height: auto;
border-style: solid;
border-width: 1px;
border-color: ed1d78;
}

    [Moderator note: In future please wrap your code in backticks, it makes it a lot easier to read for us and stops the forum’s parser from corrupting your code]

    Here is the URL

    https://bjssoftware.net/demo/cms/222/

    There is two pages under the About page but they are on top of each other in the submenu so can only see the one.

    Any help would be greatly appreciated.

    Thank you

Viewing 11 replies - 1 through 11 (of 11 total)

  • The two submenu items in the drop down display without problem in Chrome. What browser are you using?

    Thread Starter bjssoftware

    (@bjssoftware)

    Then I really don’t understand as I am using chrome.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    currently the submenu items are on top of each other horizontally.

    You only have 1 submenu item so we can’t see the issue.

    Thread Starter bjssoftware

    (@bjssoftware)

    Sorry. I had the wrong theme activated. I have activated the correct one now.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Still looks the same to me, check if you’re using a caching plugin

    Thread Starter bjssoftware

    (@bjssoftware)

    There is two pages under the about page. Lingerie and swimwear. Only one can be seen as they are on top of each other in the drop down.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So there’s a bunch of styles applied to submenu items causing this. What theme are you using?

    Thread Starter bjssoftware

    (@bjssoftware)

    A home made one. I am learning to create my own. Can I send you the login details at all so you can access the back end.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Add this CSS:

    .navmenu li li {
 position: static;
 float: none;
 margin: 0;
}

    That should give you a hint as to what styles you have that are causing the issue.

    You need to be really cautious about giving your login credentials out to anyone, but anyway we don’t need that. If it turned out you needed that level of support we’d have to forward you onto professional support avenues.

    Thread Starter bjssoftware

    (@bjssoftware)

    Thank you for a your help. I will give that a go when at home and see how I get on.

    Thread Starter bjssoftware

    (@bjssoftware)

    That seems to be working perfectly. Thank you very much. You have been a great help. Will mark as resolved.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘drop down menu css problem’ is closed to new replies.