Displaying/hiding an element whereby CSS

HTML & CSS
1

Hi everyone,
My HTML page contains an horizintal, 4 items menu and a red square.
The default display of that red sqaure is “unseen”. You can see that red square
only with mouse hovers the first menu item " aaaa". This is the HTML code:


<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <meta charset='utf-8'>
    <link rel="stylesheet" type="text/css" href="css/red_style.css" />
  </head>
  <body>
    <ul>
      <li><a id="xxx" href="#">aaaa</a></li>
      <li><a href="#">bbbb</a></li>
      <li><a href="#">cccc</a></li>
      <li><a href="#">dddd</a></li>
  </ul>
  <div id="xxx">
  </body>
</html>

And this is the style page (red_style.css)


html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote,a, abbr, acronym, address, big, cite, del,
dfn, em, img, ins, kbd, small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time,
mark, audio, video
	{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
ul {
    position:absolute;
    list-style-type:none;
    border: 1px solid red
   }
ul li {
      float:right;
      border-right:1px solid #9fa9aa;
      }
a:hover {color:#2c3e50;font-size:105%;}
li a#xxx:hover #yyy{display:block}
div#yyy {
          position: absolute;
          width:43.5%;
          height:54.5%;
          margin: 12% 0% 0% 37%;
          background-color:red;
          background-repeat: no-repeat;
          display:none;
          }

My question is: Why doesnt the red square (div#yyy) show up when menu item “aaaa” is hovered?
Thanks a lot !

2

The HTML cannot work. Replace the body contents of the HTML with the following and see if this helps.


<body>

<ul>
    <li><a id="xxx" href="#">aaaa<div id="yyy"></div></a></li>
    <li><a href="#">bbbb</a></li>
    <li><a href="#">cccc</a></li>
    <li><a href="#">dddd</a></li>
</ul>

</body>

Why are you declaring the <ul> and and <div> to be {position:absolute}? The CSS does not make much sense even as a learning experiment. It might be helpful if you could include a drawing of what you expect the page to look like.

3

Thanks ronpat,
Your advise is helpful enough to save me sending a drawing.
I left the positioning after having isolated the problem from the whole page worrying that without it other problems might emerge.
Thanks a lot ! The code works fine !

4

In the interest of providing an explanation to go along with the suggestion… the reasons that your example would not work are 2:
(1) The <div> had the wrong id. (Aside: I’m sure you know that an ID can only be used ONCE on a page. Classes are far better most of the time.)
(2) But most importantly, the <div> was outside of the <a>. One can target a child inside of a container by hovering over the container, but cannot target an object outside of the hovered container. The <div> was moved inside of the <a> anchor so it would be a targetable child of the anchor.

5

Thank you,

  1. Negligently I didn’t change the div’s id name to ‘yyy’ in the post as I did in my code while I was writing that post;
  2. “One can target a child inside of a container by hovering over the container” is the essence of my problem and I’ll try to keep this in mind.
    Thanks again