We Keep Coding

Child div background-color does not fit parent div when zooming

Depending on the zoom-level of the browser, the background color of the child div has a strange behavior. Some white spaces appears.
See these examples:
Zoom 125%:
Zoom 150%:
Zoom 175%:
Zoom 200%:
Here is my code:
(JSFiddle: https://jsfiddle.net/3L4wfvyg/)
$(document).ready(function () {
document.getElementById("HeaderContainer").addEventListener("click", function (e) {
if (e.target.id != "FormContainer") {
document.getElementById("Container3").classList.toggle("clicked");
document.getElementById("HeaderContainer").classList.toggle("HeaderContainer3");
};
});
});
.Container1 {
background-color: white;
line-height: 30px;
font-size: 20px;
color: black;
border: none;
position: absolute;
}
.Container1 h3 {
font-size: 30px;
color: #142D41;
margin-top: 20px;
margin-bottom: 10px;
position: relative;
}
.Container1 .Container3 {
padding: 30px;
display: block;
border: 1px solid black;
border-radius: 5px;
margin-top: 15px;
font-size: 15px;
min-width: 100%;
background-color: white;
text-align: left;
height: 100px;
overflow: hidden;
}
.Container1 .Container3:hover {
text-decoration: none !important;
cursor: pointer;
}
.HeaderContainer3:hover {
color: white !important;
background-color: blue;
}
.HeaderContainer2 {
padding: 30px;
}
.HeaderContainer1 {
z-index: 10;
position: relative;
margin: -31px;
padding: 32px 30px 25px 30px;
width: auto;
}
.FormContainer {
font-size: 20px !important;
}
#Container3 {
height: 0px;
transition: height 300ms ease-in-out;
box-shadow: 0.1px 0.6px 2px 0px #8c8c8c;
}
#Container3.clicked {
height: 314px;
}
.Header {
position: relative;
padding-top: 6px;
overflow: hidden;
width: 100%;
height: 100%;
cursor: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="Container1" class="Container1">
<h3>Title
</h3>
<div class="Container2">
<div id="Container3" class="Container3">
<div id="HeaderContainer" class="HeaderContainer1 HeaderContainer2 HeaderContainer3">
<div class="Header">Header</div>
</div>
<div id="FormContainer" class="FormContainer">
<hr />
<div style="padding: 5px 0px 8px 0px;">
Form
</div>
<br />
<div id="FormElementsContainer" class="FormElementsContainer">
<div>
<b>First</b>
<br />
</div>
<div>
<b>Last</b>
<br />
</div>
<div>
<b>Third</b>
<br />
</div>
<div>
<br />
<button>
Submit
</button>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
Why is this happening and how can I solve the problem?
When i remove the border from Container3 it seems like the problem does not occur anymore, but I do not know if this is because it gets hard to see if the problem is still there due to the white color.

There can be a sort of edge effect on zoom brought about by one CSS pixel not being just one screen pixel but 2 or more on high def/modern screens. If the system is trying to map several screen pixels to one CSS one and is asked to do a fraction it can sometimes 'leave behind' a screen pixel. Hence the white on occasion, and the variation at different zoom levels.
In the case in the question maybe doing a simple hack, making the parent element have background blue on hover, would be sufficient?
.Container1 .Container3:hover {
text-decoration: none !important;
cursor: pointer;
background-color: blue;
}

Inspired by A Haworth's answer: coloring the parent element instead is indeed less prone to rendering artifacts when dealing with different zoomlevels/screen densities. You could remove the background from the child element, and add a new :hover selector for the parent that only activates when it is not in the .clicked state.
.HeaderContainer3:hover {
color: white !important;
/** Background removed here **/
}
/** New block with a :not selector **/
.Container1 .Container3:hover:not(.clicked) {
background-color: blue;
}
Full working code example:
$(document).ready(function () {
document.getElementById("HeaderContainer").addEventListener("click", function (e) {
if (e.target.id != "FormContainer") {
document.getElementById("Container3").classList.toggle("clicked");
document.getElementById("HeaderContainer").classList.toggle("HeaderContainer3");
};
});
});
.Container1 {
background-color: white;
line-height: 30px;
font-size: 20px;
color: black;
border: none;
position: absolute;
}
.Container1 h3 {
font-size: 30px;
color: #142D41;
margin-top: 20px;
margin-bottom: 10px;
position: relative;
}
.Container1 .Container3 {
padding: 30px;
display: block;
border: 1px solid black;
border-radius: 5px;
margin-top: 15px;
font-size: 15px;
min-width: 100%;
background-color: white;
text-align: left;
height: 100px;
overflow: hidden;
}
.Container1 .Container3:hover {
text-decoration: none !important;
cursor: pointer;
}
.Container1 .Container3:hover:not(.clicked) {
background-color: blue;
}
.HeaderContainer3:hover {
color: white !important;
}
.HeaderContainer2 {
padding: 30px;
}
.HeaderContainer1 {
z-index: 10;
position: relative;
margin: -31px;
padding: 32px 30px 25px 30px;
width: auto;
}
.FormContainer {
font-size: 20px !important;
}
#Container3 {
height: 0px;
transition: height 300ms ease-in-out;
box-shadow: 0.1px 0.6px 2px 0px #8c8c8c;
}
#Container3.clicked {
height: 314px;
}
.Header {
position: relative;
padding-top: 6px;
overflow: hidden;
width: 100%;
height: 100%;
cursor: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="Container1" class="Container1">
<h3>Title
</h3>
<div class="Container2">
<div id="Container3" class="Container3">
<div id="HeaderContainer" class="HeaderContainer1 HeaderContainer2 HeaderContainer3">
<div class="Header">Header</div>
</div>
<div id="FormContainer" class="FormContainer">
<hr />
<div style="padding: 5px 0px 8px 0px;">
Form
</div>
<br />
<div id="FormElementsContainer" class="FormElementsContainer">
<div>
<b>First</b>
<br />
</div>
<div>
<b>Last</b>
<br />
</div>
<div>
<b>Third</b>
<br />
</div>
<div>
<br />
<button>
Submit
</button>
</div>
</div>
<br />
</div>
</div>
</div>
</div>

Here's a fix. It's similar to what someone else suggested, but takes into account the .clicked state.
Fix boils down to setting the background-color property on the container with border and border-radius properties instead of on the nested container. It achieves this by replacing .HeaderContainer3:hover selector with .Container3:not(.clicked):hover.
.Container3:not(.clicked):hover {
color: white !important;
background-color: blue;
}
Working fiddle: https://jsfiddle.net/2eqLb6go/
As for why this happens, I don't have a technical answer, but it does appear to have something to do with fractional pixel rendering with nested containers when parent has a border. Here's a demonstration of the same problem in a simplified form:
https://jsfiddle.net/0vje6k5w/
It seems like a rendering issue due to a rounding error with border. It appears that the clipping area and the border widths are calculated differently resulting in an inconsistent gap of transparent pixels which can be rounded to either 0 or 1. The background of the container with the border property is respected (hence the above-described fix), but anything nested inside of it will be clipped, and there doesn't appear to be any way to stop that from happening. E.g. the problem persists even if the child elements are absolutely positioned inside of it.
Honestly, I'd call this a buggy implementation of the box-model with regard to page zoom. It's odd that all major browsers in 2021 suffer from the same behavior.

I changed border size to 0.0125em. (It's weird but worked!).
.Container1 .Container3 {
border: 0.0125em solid black;
}

CSS - Formatting a Navigation div beside multiple divs

I designed my site so that a navigation bar spans down the whole site. It is handled in a div. The rest of the site is inside divs as well, and will be placed beside the navigation div.
After placing the first div beside the navigation div, everything worked out. When I tried to add a second div beside the navigation div and under the first div, it goes outside of the body. I can I fix this?
THE ORANGE BORDER DIV IS THE ONE I AM TRYING TO FIX
Here is my site
: JSFiddle would be to large and hard to understand, so please use the console in your browser to help me out.
firstBox is the div that isn't working how I want it to. #navigationPane and #topBox are in the right position
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/stellar.js/0.6.2/jquery.stellar.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
function dBug(data) {
console.log(data);
}
dBug("document ready");
$.stellar();
});
</script>
<style type="text/css">
body {
margin-top: 0px;
margin-bottom: 0px;
margin-top: 20px;
margin-bottom: 20px;
width: 1000px;
min-height: 800px;
max-height: 1200px;
margin-left: auto;
margin-right: auto;
font-family: Verdana,Helvetica,Arial,sans-serif;
border: solid green 1px;
}
h1 {
text-align: center;
margin-top: 10px;
color: white;
margin-top: 20px;
}
p {
color: white;
text-align: center;
}
#small {
font-style: italic;
font-size: 10px;
margin-top: -12px;
}
#topBox {
height: 400px;
width: 929px;
border: solid blue 1px;
float: right;
margin-top: -1px;
margin-right: -1px;
background-image: url(image.jpg);
background-size: 1400px 600px;
background-position: -0% 60%;
cursor: default;
}
#firstBox {
height: 400px;
width: 928px;
border: solid orange 1px;
float: right;
cursor: default;
}
#navigationPane {
width: 70px;
margin-left: -1px;
border: solid red 1px;
min-height: 1200px;
max-height: 2000px;
margin-bottom: -1px;
margin-top: -1px;
background-color: purple;
}
#box {
width: 500px;
height: 150px;
border: dotted white 2px;
clear: none;
background-color: rgba(0, 0, 0, 0.85);
margin-left: 200px;
margin-top: 120px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#navigationPane img {
margin-left: 5px;
margin-top: 10px;
}
a:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<div id="topBox" data-stellar-background-ratio="0.2">
<div id="box" >
<h1>WH Programming</h1>
<p>Will Houle Programming - Student Developer</p>
<p id="small">A site created to host tutorials, past lab assignments, and future endeavors.</p>
</div>
</div>
<div id="navigationPane">
<img src="twitter.png" />
<img src="humber.png" />
</div>
<div id="firstBox">
</div>
</body>
</html>
I know the coding is very unorganized, but for now this is what im working with

Have you tried to add some css property which is useful for you?
however, let me tell you. you should use position and top property for the box which is going out of thr body.
here is that code:
<div id="firstBox" style="
position: relative;
top: -800;"></div>
or
in your #firstdiv of css stylesheet add these two:
position: relative;
top: -800;

Text overlapping issue only in Internet Explorer

I have search box with text input and button input side by side with button inside the search box. On Internet Explorer, when we type a long string the text overlaps with the button. This works flawlessly with other browsers like firefox and chrome and text overlaps do not happen there.
HTML code:
<td style="width: 44%" align="right">
<div class="searchBox_div">
<input type="text" id="search" name="search" style="background-color: white; -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-left-colors: none; -moz-border-bottom-colors: none; border-color: black -moz-use-text-color black black; border-image: none; padding: 2px 15px 0 0; border-width: 1px;">
<input type="button" id="overlay_search" title="Perform Search" style="-moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; padding: 5px 6px; border-width: 0px 0px 0px 0px;">
</div>
</td>
CSS:
.searchBox_div {
display: inline-block;
verticle-align: middle;
background: #FFF url(/themes/default/images/glyphicons-halflings-black.png) no-repeat 5px 6px;
position: relative;
}
.searchBox_div: before {
content: "";
display: block;
position: absolute;
background: url(/themes/default/images/glyphicons-halflings-black.png) no-repeat center center;
width: 24px;
left: 4px;
top: 50 % ;
margin-top: -12px;
z - index: 1;
overflow: hidden;
}
.searchBox {
height: 30px;
width: 400px;
padding-left: 30px;
font-size: 20px;
}
.searchBox_div::-ms-clear {
width: 0;
height: 0;
display: none;
}
#overlay_search {
position: absolute;
background: url(/themes/default/images/glyphicons-halflings-black.png) no-repeat center center;
width: 24px;
height: 24px;
right: -4px;
top: 50 % ;
background-position: -48px 5px;
margin - top: -11px;
z - index: 1;
display: inline-block;
overflow: hidden;
}
#overlay_cancel {
background-image: url("/themes/default/images/glyphicons-halflings-black.png");
background-position: -313px 5px;
background-repeat: no-repeat;
display: inline-block;
height: 24px;
line-height: 14px;
margin-top: 0;
vertical-align: text-top;
padding: 2px 25px 0 0;
width: 14px;
}
I will post screenshot as soon as I get enough points on stackoverflow. I am trying something like this from Dojo Javascript which is partially working for me. But does not look as good as I want.
if(dojo.isIE){
on(dom.byId("search"), "focus", function () {
style.set("search", "backgroundColor", "rgb(253,216,87)");
style.set("searchBox_div", "border-width", "1px");
style.set("searchBox_div", "backgroundColor", "rgb(253,216,87)");
style.set("searchBox_div", "background-position-x", "15px");
});
}
Please help me fix this in internet explorer.

If you have problems only with the IE you can target your CSS only for IE different versions, i had this problems with different IE version and the solution below helped me a lot and still helping me:
check out browser compatibility: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
For example tell me in which version of IE u have problem:
and u can do something like this to create a css file and write inside the css
[if IE]
<link rel="stylesheet" type="text/css" href="your_css_that_will_affect_only_ie.css" />
[endif]
or u can do something like this
[if IE]
.searchBox_div {
display: inline-block; // u change anything here
verticle-align: middle;// u change anything here
background: #FFF url(/themes/default/images/glyphicons-halflings-black.png) no-repeat 5px 6px;// u change anything here
position: relative;// u change anything here
}
[endif]

I couldn't see any difference in the explorer with your code. What i can advice you for this class
#overlay_search{
right: -22px; // take it out completely from input field
}
if that will not help make a screenshot how is looking now and how u want that will look. And i will fix exactly as you wish.

I solved this issue by adding CSS and HTML right from stratch and removing absolute positioning and other unnecessary CSS.
<div>
<input type="text" class="tftextinput" name="search" id="search" size="21" style="border:gray solid;border-width: 1px 0px 1px 1px;"/>
<input type="submit" value="" id="overlay_search" class="tfbutton" style="border: 1px gray solid;height:22px;border-width: 1px 1px 1px 0px;"/>
</div>
.tftextinput{
margin: 0;
padding: 5px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
width: 94px;
height:10px;
border:none;
}
.tfbutton {
margin: 0px;
height:20px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
background: url(/themes/default/images/glyphicons-halflings-black.png) #ffffff no-repeat center center;
background-position: -47px 3px;
border:none;
width:20px;
}

one page website with css transition to sweep content in from alternating sides

I am trying to create a one page website with 7 navigation links. See my fiddle below.
The first navigation link is located in the top left corner, for now its text called "home". The other 6 links are located underneath my "middle" div.
I am trying to achieve the following effect:
the home page is always displayed upon landing
the 6 links underneath the "middle" div should appear from either the left side of the screen or right side simply depending on this logic: 1st transition enter screen from right side, 2nd transition enter screen from left side, all subsequent transitions to alternate sides.
Each transition should push the existing content off the screen instead of overlapping it.
If the navigation links are explored in sequence from page 1 to page 6, each time a link is clicked the transition should alternate sides. In my current fiddle (although not working correctly) the pages 1 through 6 will all enter the screen from right hand side and if you navigate backwards from 6 to 1 they all enter the screen from the left. This is not what I am looking for. I want alternating sides regardless of which link is clicked except home link in top left.
when the home link is clicked when viewing another links content the transition should appear from top of the screen and push the existing content off the bottom of the screen. This transition should happen behind all the other divs ie. header and footer.
If anyone is able to help me I would really appreciate it as this has taken me quite some time and research.
Here is my html:
<div class="main">
<div class="main_header">
<div id="navigation">
<a id="home_link" href="index.php">Home</a>
<form action="url" method="post" class="formTop">
<input type="text" class="login" Value="Email Address"onfocus="if (this.value == 'Email Address') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Email Address';}" />
<input type="password" class="login" value="Password" onFocus="if (this.value == 'Password') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Password';}" />
<input type="submit" class="submitButton" value="Log in" />
Sign Up
</form>
</div> <!--navigation-->
</div> <!--main_header-->
<div class="main_header_bottom"></div>
<div id="middle">
<div id="page1_content" class "content">Page 1 Content</div>
<div id="page2_content" class "content">Page 2 Content</div>
<div id="page3_content" class "content">Page 3 Content</div>
<div id="page4_content" class "content">Page 4 Content</div>
<div id="page5_content" class "content">Page 5 Content</div>
<div id="page6_content" class "content">Page 6 Content</div>
</div> <!--middle-->
<div class="sub_footer">
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
</div> <!--sub_footer-->
<div class="footer">
<p>| Contact |
<br />
<SCRIPT LANGUAGE="JavaScript">
today = new Date();
y0 = today.getFullYear();
</SCRIPT>Copyright © 2012-
<SCRIPT LANGUAGE="JavaScript">
document.write(y0);
</SCRIPT> MySampleSiteUnderSonstruction.com. All Rights Reserved</p>
</div> <!--footer-->
</div> <!--main-->
Here is my CSS
body {
background-color: #F5F5F5;
padding: 0;
margin: 0;
text-shadow: 1px 1px 1px #CCC;
font: 0.7em Arial, sans-serif;
line-height: 1.5em;
color: #454545;
overflow-x: hidden;
}
a {
color: #0E4D8B;
background: inherit;
}
a:hover {
color: #000;
background: inherit;
}
a.title {
color: #B41A1A;
background: #FFF;
}
h1 {
font: bold 2em Arial, Sans-Serif;
letter-spacing: -1px;
padding: 16px 0 0 8px;
margin: 0;
}
h2 {
margin: 0;
padding: 0;
font: normal 1.6em Arial, Sans-Serif;
letter-spacing: -1px;
}
h1 a {
color: #FFF;
background: inherit;
}
h1 a, h2 a {
text-decoration: none;
}
h1 a:hover, h2 a:hover {
color: #BFE1ED;
background: inherit;
}
h3 {
font: 90% Arial, Sans-Serif;
margin: 0 0 10px 0;
padding: 0;
color: #5f5f5f;
background: #FFF;
}
p {
align:center;
margin: 0 0 0px 0;
line-height: 1.5em;
}
.main {
margin: 0;
overflow: hidden;
}
.main_header {
background-color: #6E6D71;
height: 75px;
}
.main_header_bottom {
height: 20px;
}
#navigation {
height: 75px;
margin: 0;
padding-left: 100px;
box-shadow: inset 0 -20px 20px -20px #000;
}
#home_link {
float: left;
background-image: url(http://wwwdrumtranscriptions/new/home.png);
background-repeat: no-repeat;
height: 36px;
margin-top: 20px;
width: 40px;
}
.formTop {
float: right;
margin-top: 15px;
margin-right: 75px;
height: 45px;
padding: 5px 8px 0px;
}
.login {
border: 1px solid #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0 0 4px ##333;
-webkit-box-shadow:inset 0 0 4px #333;
-moz-box-shadow:inset 0 0 4px #333;
color: #6E6D71;
font-size: 12px;
background-color: #CCC;
padding: 8px;
}
#middle {
background-color: blue;
padding-top: 5px;
height: 200px;
/* test only */
margin-left: 110%;
/* Start position: right outside */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
#middle.page1_inside {
margin-left: 0;
}
#middle.page2_inside {
margin-left: -100%;
}
#middle.page3_inside {
margin-left: -200%;
}
#middle.page4_inside {
margin-left: -300%;
}
#middle.page5_inside {
margin-left: -400%;
}
#middle.page6_inside {
margin-left: -500%;
}
#middle.transition {
/* Effects only */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
.content {
width: 100%;
margin-right: 10px;
}
#page1_content {
margin-left: 0;
background-color: black;
color: yellow;
}
#page2_content {
margin-left: 100%;
background-color: yellow;
color: black;
}
#page3_content {
margin-left: 200%;
background-color: purple;
color: red;
}
#page4_content {
margin-left: 300%;
background-color: green;
color: orange;
}
#page5_content {
margin-left: 400%;
background-color: red;
color: purple;
}
#page6_content {
margin-left: 500%;
background-color: purple;
color: green;
}
.sub_footer {
text-align: center;
}
.links {
display: inline-block;
padding: 0px 15px 0px 15px;
}
.footer {
clear: both;
text-align: center;
color: #808080;
background: #f0f0f0;
padding: 10px 0 5px 0;
border-top: 1px solid #eee;
}
.footer p {
line-height: 2em;
}
.footer a {
color: #4F4F4F;
background: #f0f0f0;
border-bottom: 1px dotted #808080;
text-decoration: none;
}
Here is my js
$(document).on("click", ".links", function () {
$("#middle").removeClass(); /* Remove all classes */
$("#middle").addClass("transition " + this.id + "_inside"); /* add 'transition' for effects and eg. 'home_inside' classes */
});
Here is my Fiddle
Thanks

I suggest using .animate() I had the same idea and when I tried it it worked perfectly also if you want to have the old ones pushed off use a <ul> inside a div with overflow: hidden; then on the li's use display: inline; and list-style-type: none;
Here is a working fiddle
http://jsfiddle.net/X4URc/3/

Here's an example of how to get this working page1-page6:
#middle.page2_inside #page2_content {
margin-left: 50%;
margin-top: -16px;
}
#middle.page3_inside #page3_content {
margin-left: 66.66%; // margin-left is [(pageNum-1)/pageNum]*100% = 100% * 2/3
margin-top: -64px;
}
#middle.page4_inside #page4_content {
    margin-left: 75%; // 100% * 3/4
margin-top: -112px;
}
#middle.page5_inside #page5_content {
margin-left: 80%; // 100% * 4/5
margin-top: -160px;
}
#middle.page6_inside #page6_content {
margin-left: 83.33%; // 100% * 5/6
margin-top: -208px;
}
Demo

Having a problem with selectors

The problem I'm having is not being able to select the divs inside the 'menuItem' class divs. I've tried using the jQuery selector to select by both class and even ID, but every time I try to do anything with it, such as an animation, nothing happens. Is there some jQuery law I don't know about that prevents me from doing so?
$('.menu')
.hover( function() {
$(this).toggleClass('highlighted');
})
.click(function() {
$(this).parent().children('.menuItem').children('#wtf').slideDown();
});
Also tried these for the click(), but none of them work..
$('#wtf').slideDown();
$('.test').slideDown();
$(this).parent().find('.menuItem').each( function() { $(this).slideDown(); } );
$(this).parent().children('.menuItem').children().slideDown();
<div class='box'>
<div>
<div class='menu'>Resources</div>
<div class='menuItem'>
<div ID='wtf' class='test'>Library</div>
<div>Internet</div>
<div>Your mom</div>
</div>
</div>
<div>
<div class='menu'>Products</div>
</div>
<div>
<div class='menu'>Contact</div>
</div>
</div>
body { font-size: 16px; }
.box {
background: blue;
border: 1px;
padding: 4 6 4 6;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid;
}
.box div {
float: left;
text-align:center;
}
.menu {
background: lightblue;
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-weight: bold;
font-family:'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid gray;
}
.highlighted {
background: lime;
color: navy;
}
.menuItem {
clear: left;
position: absolute;
margin-top: 30px;
}
.menuItem div {
display: none;
background: lightblue;
opacity: .7;
filter: alpha(opacity=.7);
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-size: 10px;
font-family: 'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid white;
clear: left;
}

Have you tried?
$(this+' > .menuItem div')

I applied a background color to your style and your jQuery selector wasn't selecting properly. I tried this and it changed the background color, but I don't have CSS in place for the visual of the slideDown() to work - you'll have to write your CSS up correctly.
$(this).siblings().find("#wtf").css("background-color","#cccccc").slideDown();