SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can i target sub-menu class help please

    Hi i have the following html code produced by wordpress menu now i am trying to style the whole ul sub-menu but i cant seem to be able to target that sub-menu ul can someone help out please

    I have tried like this but didnt work
    HTML Code:
    #menu-left-side-menu li.current-menu-item ul.sub-menu { background-color:red;}
    i also tried just
    HTML Code:
    .sub-menu {  background-color:red;}
    here the html menu
    HTML Code:
    <ul class="menu" id="menu-left-side-menu">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82 dcjq-parent-li" id="menu-item-82"><a href="/about-us/" class="dcjq-parent">About us<span class="dcjq-icon"></span> <span class="dcjq-count">(1)</span></a>
            <ul class="sub-menu" style="display: none;">
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114" id="menu-item-114"><a href="about-us/company-history/">Company History</a>
                </li>
            </ul>
        </li>
    </ul>

  2. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Well, the ul in contention is set to display:none;

    Meaning it's invisible...

    ~TehYoyo

  3. #3
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it use jquery when you click on the title of the menu it becames visible.

    you can see working here if you use firefox inspect the menu you should see the sub-menu class, i want to style when its visible
    http://themoneymap.zealcreate.co.uk/about-us/

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Are you messing with the page right now? Stuff seems to be changing.

    Also, the menu isn't even having anything appear on hover right now, even with the display:block value set on . Set it back to the way it was (I presume the original had it visible on hover)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Are you messing with the page right now? Stuff seems to be changing.

    Also, the menu isn't even having anything appear on hover right now, even with the display:block value set on . Set it back to the way it was (I presume the original had it visible on hover)
    sorry yes i was try to see if i can pick up te sub menu i'll leave as it is for now for a few mins if you figure how i can style the sub-menu would really appreciate the sub-menu appears when you click on it not on hover.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Thank you . Your li's and anchors are floated. That's causing the .sub-menu to not have a height at all. You have two choices

    1) Add the clearfix to the .sub-menu. Essentially just add this code in to fix everything

    Code:
    .sub-menu:after {    content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }
    Option 2 is to unfloat the dropdowns <li>'s and anchors. Aka

    Code:
    .sub-menu li, .sub-menu li a{float:none!important;}
    I added !important here for specificity, however you shouldn't replicate that exactly. Find a way to add more specificity to it without using !important . It'll save maintenance nightmares down the road.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot RyanReese both solutions did the trick i will try make make without using the important if i can, thanks alot

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You're welcome . Glad I was able to help.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •