CODEWITHSUNDEEP
htmlcss
Cappuccio
Cappuccio

Reputation: 5

CSS3 targeting issue

first question here so please go easy on me :).

I started studying css3 two weeks ago, and now i'm trying to build a pure css3 dropdown menu system. I got my menu built like this

<body> 
        <div id="column">
            <div id="header">
                <heading1>Header.</heading1>
            </div>

            <div id="menu">
                <a href="Home.html"><menu-element class="chosen"> Home page</menu-element></a>
                <a href="Project.html"><menu-element>Project</menu-element></a>
                <a href="Gallery.html">
                    <menu-element> Gallery
                        <ul>
                            <li>1</li>
                            <li>2</li>
                        </ul>
                    </menu-element>
                </a>

            </div>
....
</body>

I'm working by integrating the css code i studied on a tutorial to work on my css structure. The step i'm having problem is is the first: hiding the submenu items when not on mouseover.

I tried with

menu-element ul
{
    display: none;
}

to hide only ul elements nested in menu-element elements, but it didn't work.. and the ul and its li childs are still there. Could anyone help me out by telling me where i'm wrong?

Upvotes: 0

Views: 69

Answers (3)

clancimus
clancimus

Reputation: 33

Best practice in creating navigation menus is to use an unordered list for the entire menu. This way if styles are not loaded (for whatever reason) it still reads properly. As other have mentioned, and are not valid tags.

I would suggest using the model below:

<nav>
    <ul>
        <li><a href="Home.html">Home</a></li>
        <li><a href="Project.html">Project</a></li>
        <li>
            <a href="Gallery.html">Gallery</a>
            <ul class="gallery">
                <li>1</li>
                <li>2</li>
            </ul>
        </li>
     </ul>
</nav>

And for the css you could use

ul.gallery{
    display: none;
}

or

nav ul li ul{
    display: none;
}

I use the second option when creating pure css dropdown menus as it is easier to follow along as you create more complicated menus. It also allows you to hide all submenus rather than just the one with the class of gallery.

Upvotes: 0

vals
vals

Reputation: 64174

I think that you are doing your tests in IE, and in some of the old compatibility modes.

In Chrome, Firefox, and IE 11, your code works

fiddle

code fragment to make SO happy:

menu-element ul
{
    display: none;
}

Chrome dev tools

It is true that your elements are not valid HTML types, (and of course you should use valid ones!!) but HTML5 compliant browser are quite liberal about that.

Upvotes: 0

PixelAcorn
PixelAcorn

Reputation: 494

Your only problem is that you have invalid html tags, (<menu-element> and <heading1>).

Instead of <menu-element> use <nav>, and instead of <heading1> use <h1>.

Upvotes: 1

Related Questions