CSS3 targeting issue

Question

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?

What are `heading1` and `menu-element`? These aren't valid HTML elements, so I suspect CSS doesn't understand these either. — gpgekko, Feb 25 '14 at 15:12
Just use the basic `nav/ul/li/a` structure like everyone else...please! Here's one I keep around for reference: http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294 — Paulie_D, Feb 25 '14 at 15:15
People, as I commented below I know I'm using an unorthodox element structure naming, but I don't get why that should limit css effects on them. — Cappuccio, Feb 25 '14 at 15:37

PixelAcorn · Answer 1 · 2014-02-25T15:22:05.863

1

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>.

edited Feb 25 '14 at 15:22

answered Feb 25 '14 at 15:16

PixelAcorn

494
8
26

When did `` become an element...? Did you mean `
`?
– Paulie_D Feb 25 '14 at 15:18
@Paulie_D
is by far the better choice, but is a valid html tag.
– PixelAcorn Feb 25 '14 at 15:20
The element was deprecated in HTML 4.01. – Paulie_D Feb 25 '14 at 15:21
Yea, I just saw that. Editing post – PixelAcorn Feb 25 '14 at 15:21
@Paulie_D: It was reintroduced ("undeprecated"?) in HTML5, according to your link. – BoltClock Feb 25 '14 at 15:30
I'm confused, is `` deprecated or not? – PixelAcorn Feb 25 '14 at 15:31
I know i didn't use orthodox elements, but why sould that affect CSS effectiveness on them? I'm using tags in (I think) correct way, so why should "menu-element" give me problems and "nav" not? Thanks for your patience guys! – Cappuccio Feb 25 '14 at 15:33
@boltClock @ Jaxon On further investigation the `` element was re-introduced but not for the context in which it is being used here. Interesting. – Paulie_D Feb 25 '14 at 15:37
1

@user3347975 Creating you own elements means that the browser may not recognise them, in which case, it cannot parse the CSS to apply it. – Paulie_D Feb 25 '14 at 15:38
Mmmh... I still don't get why, but your answer was super helpful, since I didn't really think there was a difference between using standard elements and creating my own. May i hit you up in private, @Paulie_D ? I got some more questions to ask. – Cappuccio Feb 25 '14 at 15:43

score 0 · Accepted Answer · answered Feb 25 '14 at 16:56

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.

score 0 · Answer 3 · answered Feb 25 '14 at 17:13

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.

CSS3 targeting issue

3 Answers3